<template>
  <div class="content" style="width:100%;margin-left: 2%;">
    <div v-cloak id="app-menu">
      <el-row>
        <!--公众号选择-->
        <div class="wx-picker">
          <el-radio-group v-model="mchId" @change="getMenu">
            <el-radio-button v-for="item in wxConfigList" :key="item.mchId" :label="item.mchId">{{
                item.name
              }}
            </el-radio-button>
          </el-radio-group>
        </div>
        <!-- 预览窗 -->
        <div class="weixin-preview">
          <div class="weixin-hd">
            <div class="weixin-title">{{ wxConfigInfo ? wxConfigInfo.name : '' }}</div>
          </div>
          <div class="weixin-bd">
            <ul id="weixin-menu" class="weixin-menu">
              <li
                v-for="(btn,i) in menu.buttons"
                :key="i"
                :class="{current:selectedMenuIndex === i && selectedMenuLevel() === 1}"
                class="menu-item"
                @click="selectedMenu(i,$event)"
              >
                <div class="menu-item-title">
                  <i class="icon_menu_dot"/>
                  <span>{{ btn.name }}</span>
                </div>
                <ul v-show="selectedMenuIndex === i" class="weixin-sub-menu">
                  <li
                    v-for="(sub,i2) in btn.subButtons"
                    :key="i2"
                    :class="{current:selectedSubMenuIndex === i2 && selectedMenuLevel() === 2}"
                    class="menu-sub-item"
                    @click.stop="selectedSubMenu(i2,$event)"
                  >
                    <div class="menu-item-title">
                      <span>{{ sub.name }}</span>
                    </div>
                  </li>
                  <li v-if="btn.subButtons.length<5" class="menu-sub-item" @click.stop="addMenu(2)">
                    <div class="menu-item-title">
                      <i class="icon14_menu_add"/>
                    </div>
                  </li>
                  <i class="menu-arrow arrow_out"/>
                  <i class="menu-arrow arrow_in"/>
                </ul>
              </li>
              <li v-if="menu.buttons.length<3" class="menu-item" @click="addMenu(1)"><i
                class="icon14_menu_add"
              /></li>
            </ul>
          </div>
        </div>
        <!-- 主菜单 -->
        <div v-if="selectedMenuLevel() === 1" class="weixin-menu-detail">
          <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
            <div class="menu-name">{{ menu.buttons[selectedMenuIndex].name }}</div>
            <div class="menu-del" @click="delMenu">删除菜单</div>
          </div>
          <div class="menu-input-group">
            <div class="menu-label">菜单名称</div>
            <div class="menu-input">
              <input
                v-model="menu.buttons[selectedMenuIndex].name"
                class="menu-input-text"
                name="name"
                placeholder="请输入菜单名称"
                type="text"
                @input="checkMenuName(menu.buttons[selectedMenuIndex].name)"
              >
              <p v-show="menuNameBounds" class="menu-tips" style="color:#e15f63">字数超过上限</p>
              <p class="menu-tips">字数不超过4个汉字或8个字母</p>
            </div>
          </div>
          <template v-if="menu.buttons[selectedMenuIndex].subButtons.length===0">
            <div class="menu-input-group">
              <div class="menu-label">菜单内容</div>
              <div class="menu-input">
                <select v-model="menu.buttons[selectedMenuIndex].type" class="menu-input-text" name="type">
                  <option value="view">跳转网页(view)</option>
                  <option value="media_id">发送消息(media_id)</option>
                  <option value="miniprogram">打开指定小程序(miniprogram)</option>
                  <option value="click">自定义点击事件(click)</option>
                  <option value="scancode_push">扫码上传消息(scancode_push)</option>
                  <option value="scancode_waitmsg">扫码提示下发(scancode_waitmsg)</option>
                  <option value="pic_sysphoto">系统相机拍照(pic_sysphoto)</option>
                  <option value="pic_photo_or_album">弹出拍照或者相册(pic_photo_or_album)</option>
                  <option value="pic_weixin">弹出微信相册(pic_weixin)</option>
                  <option value="location_select">弹出地理位置选择器(location_select)</option>
                </select>
              </div>
            </div>
            <div v-if="selectedMenuType() === 1" class="menu-content">
              <div class="menu-input-group">
                <p class="menu-tips">订阅者点击该子菜单会跳到以下链接</p>
                <div class="menu-label">页面地址</div>
                <div class="menu-input">
                  <textarea
                    v-model="menu.buttons[selectedMenuIndex].url"
                    class="menu-input-textarea"
                    cols="3"
                    rows="5"
                  />
                </div>
              </div>
            </div>
            <div v-else-if="selectedMenuType() === 2" v-loading="materialLoading" class="menu-msg-content">
              <div class="menu-msg-head"><i class="icon_msg_sender"/>图文消息</div>
              <div class="menu-msg-panel">
                <div
                  v-if="!menu.buttons[selectedMenuIndex].media_id"
                  class="menu-msg-select"
                  @click="selectMaterialId"
                >
                  <i class="icon36_common add_gray"/>
                  <strong>从素材库中选择</strong>
                </div>
                <div v-else class="menu-msg-select">
                  <div class="menu-msg-title"><i class="icon_msg_sender"/>{{ material.title }}</div>
                  <a :href="material.url" class="el-button el-button--mini" target="_blank">查看</a>
                  <el-button size="mini" type="danger" @click="delMaterialId">删除</el-button>
                </div>
              </div>
            </div>
            <div v-else-if="selectedMenuType() === 3" class="menu-content">
              <div class="menu-input-group">
                <p class="menu-tips">用于消息接口推送，不超过128字节</p>
                <div class="menu-label">菜单KEY值</div>
                <div class="menu-input">
                  <input
                    v-model="menu.buttons[selectedMenuIndex].key"
                    class="menu-input-text"
                    placeholder=""
                    type="text"
                  >
                </div>
              </div>
            </div>
            <div v-else-if="selectedMenuType() === 4" class="menu-content">
              <div class="menu-input-group">
                <p class="menu-tips">订阅者点击该子菜单会跳到以下小程序</p>
                <div class="menu-label">小程序APPID</div>
                <div class="menu-input">
                  <input
                    v-model="menu.buttons[selectedMenuIndex].appId"
                    class="menu-input-text"
                    placeholder="小程序的appid（仅认证公众号可配置）"
                    type="text"
                  >
                </div>
              </div>
              <div class="menu-input-group">
                <div class="menu-label">小程序路径</div>
                <div class="menu-input">
                  <input
                    v-model="menu.buttons[selectedMenuIndex].pagePath"
                    class="menu-input-text"
                    placeholder="小程序的页面路径 pages/Index/index"
                    type="text"
                  >
                </div>
              </div>
              <div class="menu-input-group">
                <div class="menu-label">备用网页</div>
                <div class="menu-input">
                  <input
                    v-model="menu.buttons[selectedMenuIndex].url"
                    class="menu-input-text"
                    placeholder=""
                    type="text"
                  >
                  <p class="menu-tips">旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p>
                </div>
              </div>
            </div>
          </template>
        </div>
        <!-- 子菜单 -->
        <div v-if="selectedMenuLevel() === 2" class="weixin-menu-detail">
          <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
            <div class="menu-name">{{ menu.buttons[selectedMenuIndex].subButtons[selectedSubMenuIndex].name }}</div>
            <div class="menu-del" @click="delMenu">删除子菜单</div>
          </div>
          <div class="menu-input-group">
            <div class="menu-label">子菜单名称</div>
            <div class="menu-input">
              <input
                v-model="menu.buttons[selectedMenuIndex].subButtons[selectedSubMenuIndex].name"
                class="menu-input-text"
                placeholder="请输入子菜单名称"
                type="text"
                @input="checkMenuName(menu.buttons[selectedMenuIndex].subButtons[selectedSubMenuIndex].name)"
              >
              <p v-show="menuNameBounds" class="menu-tips" style="color:#e15f63">字数超过上限</p>
              <p class="menu-tips">字数不超过8个汉字或16个字母</p>
            </div>
          </div>
          <div class="menu-input-group">
            <div class="menu-label">子菜单顺序</div>
            <div class="menu-input">
              <el-button size="small" type="primary" @click="setMenuDown">向下移动一格</el-button>
              <el-button size="small" type="primary" @click="setMenuUp">向上移动一格</el-button>
            </div>
          </div>
          <div class="menu-input-group">
            <div class="menu-label">子菜单内容</div>
            <div class="menu-input">
              <select
                v-model="menu.buttons[selectedMenuIndex].subButtons[selectedSubMenuIndex].type"
                class="menu-input-text"
                name="type"
              >
                <option value="view">跳转网页(view)</option>
                <option value="media_id">发送消息(media_id)</option>
                <option value="miniprogram">打开指定小程序(miniprogram)</option>
                <option value="click">自定义点击事件(click)</option>
                <option value="scancode_push">扫码上传消息(scancode_push)</option>
                <option value="scancode_waitmsg">扫码提示下发(scancode_waitmsg)</option>
                <option value="pic_sysphoto">系统相机拍照(pic_sysphoto)</option>
                <option value="pic_photo_or_album">弹出拍照或者相册(pic_photo_or_album)</option>
                <option value="pic_weixin">弹出微信相册(pic_weixin)</option>
                <option value="location_select">弹出地理位置选择器(location_select)</option>
              </select>
            </div>
          </div>
          <div v-if="selectedMenuType() === 1" class="menu-content">
            <div class="menu-input-group">
              <p class="menu-tips">订阅者点击该子菜单会跳到以下链接</p>
              <div class="menu-label">页面地址</div>
              <div class="menu-input">
                <textarea
                  v-model="menu.buttons[selectedMenuIndex].subButtons[selectedSubMenuIndex].url"
                  class="menu-input-textarea"
                  cols="3"
                  rows="5"
                />
              </div>
            </div>
          </div>
          <div v-else-if="selectedMenuType() === 2" v-loading="materialLoading" class="menu-msg-content">
            <div class="menu-msg-head"><i class="icon_msg_sender"/>图文消息</div>
            <div class="menu-msg-panel">
              <div
                v-if="menu.buttons[selectedMenuIndex].subButtons[selectedSubMenuIndex].media_id === ''|| menu.buttons[selectedMenuIndex].subButtons[selectedSubMenuIndex].media_id === undefined"
                class="menu-msg-select"
                @click="selectMaterialId"
              >
                <i class="icon36_common add_gray"/>
                <strong>从素材库中选择</strong>
              </div>
              <div v-else class="menu-msg-select">
                <i class="icon_msg_sender"/>{{ material.title }}
                <a :href="material.url" class="el-button el-button--mini" target="_blank">查看</a>
                <el-button size="mini" type="danger" @click="delMaterialId">删除</el-button>
              </div>
            </div>
          </div>
          <div v-else-if="selectedMenuType() === 3" class="menu-content">
            <div class="menu-input-group">
              <p class="menu-tips">用于消息接口推送，不超过128字节</p>
              <div class="menu-label">菜单KEY值</div>
              <div class="menu-input">
                <input
                  v-model="menu.buttons[selectedMenuIndex].subButtons[selectedSubMenuIndex].key"
                  class="menu-input-text"
                  placeholder=""
                  type="text"
                >
              </div>
            </div>
          </div>
          <div v-else-if="selectedMenuType() === 4" class="menu-content">
            <div class="menu-input-group">
              <p class="menu-tips">订阅者点击该子菜单会跳到以下小程序</p>
              <div class="menu-label">小程序APPID</div>
              <div class="menu-input">
                <input
                  v-model="menu.buttons[selectedMenuIndex].subButtons[selectedSubMenuIndex].appId"
                  class="menu-input-text"
                  placeholder="小程序的appid（仅认证公众号可配置）"
                  type="text"
                >
              </div>
            </div>
            <div class="menu-input-group">
              <div class="menu-label">小程序路径</div>
              <div class="menu-input">
                <input
                  v-model="menu.buttons[selectedMenuIndex].subButtons[selectedSubMenuIndex].pagePath"
                  class="menu-input-text"
                  placeholder="小程序的页面路径 pages/Index/index"
                  type="text"
                >
              </div>
            </div>
            <div class="menu-input-group">
              <div class="menu-label">备用网页</div>
              <div class="menu-input">
                <input
                  v-model="menu.buttons[selectedMenuIndex].subButtons[selectedSubMenuIndex].url"
                  class="menu-input-text"
                  placeholder=""
                  type="text"
                >
                <p class="menu-tips">旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p>
              </div>
            </div>
          </div>
        </div>
      </el-row>
      <div class="weixin-btn-group">
        <el-button
          type="primary"
          @click="showMenuData = !showMenuData"
        >查看
        </el-button>
        <el-button type="primary" @click="onMenuSubmit">发布</el-button>
        <el-button type="warning" @click="getMenu">刷新</el-button>
      </div>
      <el-card v-if="showMenuData" style="font-size: 14px;margin-right: 5%">
        <pre>{{ menu }}</pre>
      </el-card>
    </div>

  </div>
</template>

<script>
import {getMenu, getWxConfigSetInfoList, menuJson} from '@/api/wx/wx-menu'

const getMaterialAPI = 'https://hopex.github.io/vue-menu/test_material_detail.json'
const getMaterialListAPI = 'https://hopex.github.io/vue-menu/test_material.json'
const getNewsListAPI = 'https://hopex.github.io/vue-menu/test_news.json'

export default {
  name: 'WxMenu',
  data() {
    return {
      menu: {
        buttons: []
      }, // 当前菜单
      selectedMenuIndex: '', // 当前选中菜单索引
      selectedSubMenuIndex: '', // 当前选中子菜单索引
      menuNameBounds: false, // 菜单长度是否过长
      material: {
        title: '',
        url: '',
        thumb_url: ''
      },
      materialLoading: false,
      materialDialog: false,
      materialList: [],
      materialListOffset: 0,
      materialListTotal: 0,
      newsDialog: false,
      newsList: [],
      newsListOffset: 0,
      newsListTotal: 0,
      wxConfigList: [], // 公众号列表
      mchId: 1,
      showMenuData: false
    }
  },
  computed: {
    wxConfigInfo: function () {
      const tmpList = this.wxConfigList.filter(item => item.mchId === this.mchId)
      if (tmpList.length === 1) {
        return tmpList[0]
      } else {
        return null
      }
    }
  },
  mounted() {
    console.log('mounted')
    getWxConfigSetInfoList().then((res) => {
      console.log('getWxConfigSetInfoList')
      console.log(res)
      this.wxConfigList = res.data || []
      this.getMenu()
    })
  },
  methods: {
    async getMenu() {
      try {
        getMenu().then(res => {
          console.log('getMenu')
          console.log(res)
          const buttons = res.data.buttons
          for (var i = 0; i < buttons.length; i++) {
            if (buttons[i].subButtons && buttons[i].subButtons.length > 0) {
              buttons[i].subButtons = buttons[i].subButtons
              console.log('change data')
            } else {
              buttons[i].subButtons = []
            }
          }
          this.menu = {
            buttons: buttons
          }
          console.log(this.menu)
          this.$message.success('刷新成功')
        })
      } catch (err) {
        console.error(err)
        this.$message.error(err.message)
      }
    },
    // 选中主菜单
    selectedMenu(i, event) {
      this.selectedSubMenuIndex = ''
      this.selectedMenuIndex = i
      const selectedMenu = this.menu.buttons[this.selectedMenuIndex]
      // 清空选中media_id 防止再次请求
      if (selectedMenu.media_id && this.selectedMenuType() === 2) {
        this.getMaterial(selectedMenu.media_id)
      }
      // 检查名称长度
      this.checkMenuName(selectedMenu.name)
    },
    // 选中子菜单
    selectedSubMenu(i, event) {
      this.selectedSubMenuIndex = i
      const selectedSubMenu = this.menu.buttons[this.selectedMenuIndex].subButtons[this.selectedSubMenuIndex]
      if (selectedSubMenu.media_id && this.selectedMenuType() === 2) {
        this.getMaterial(selectedSubMenu.media_id)
      }
      this.checkMenuName(selectedSubMenu.name)
    },
    // 选中菜单级别
    selectedMenuLevel() {
      if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex === '') {
        // 主菜单
        return 1
      } else if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex !== '') {
        // 子菜单
        return 2
      } else {
        // 未选中任何菜单
        return 0
      }
    },
    // 获取菜单类型 1. view网页类型，2. media_id类型和view_limited类型 3. click点击类型，4.miniprogram表示小程序类型
    selectedMenuType() {
      if (this.selectedMenuLevel() === 1 && this.menu.buttons[this.selectedMenuIndex].subButtons.length === 0) {
        // 主菜单
        switch (this.menu.buttons[this.selectedMenuIndex].type) {
          case 'view':
            return 1
          case 'media_id':
            return 2
          case 'view_limited':
            return 2
          case 'click':
            return 3
          case 'scancode_push':
            return 3
          case 'scancode_waitmsg':
            return 3
          case 'pic_sysphoto':
            return 3
          case 'pic_photo_or_album':
            return 3
          case 'pic_weixin':
            return 3
          case 'location_select':
            return 3
          case 'miniprogram':
            return 4
        }
      } else if (this.selectedMenuLevel() === 2) {
        // 子菜单
        switch (this.menu.buttons[this.selectedMenuIndex].subButtons[this.selectedSubMenuIndex].type) {
          case 'view':
            return 1
          case 'media_id':
            return 2
          case 'view_limited':
            return 2
          case 'click':
            return 3
          case 'scancode_push':
            return 3
          case 'scancode_waitmsg':
            return 3
          case 'pic_sysphoto':
            return 3
          case 'pic_photo_or_album':
            return 3
          case 'pic_weixin':
            return 3
          case 'location_select':
            return 3
          case 'miniprogram':
            return 4
        }
      } else {
        return 1
      }
    },
    // 添加菜单
    addMenu(level) {
      if (level === 1 && this.menu.buttons.length < 3) {
        this.menu.buttons.push({
          type: 'view',
          name: '菜单名称',
          subButtons: [],
          url: ''
        })
        this.selectedMenuIndex = this.menu.buttons.length - 1
        this.selectedSubMenuIndex = ''
      }
      if (level === 2 && this.menu.buttons[this.selectedMenuIndex].subButtons.length < 5) {
        this.menu.buttons[this.selectedMenuIndex].subButtons.push({
          type: 'view',
          name: '子菜单名称',
          url: ''
        })
        this.selectedSubMenuIndex = this.menu.buttons[this.selectedMenuIndex].subButtons.length - 1
      }
    },
    // 删除菜单
    async delMenu() {
      if (this.selectedMenuLevel() === 1) {
        try {
          await this.$confirm('删除后菜单下设置的内容将被删除', '提示')
        } catch {
          return
        }
        if (this.selectedMenuIndex === 0) {
          this.menu.buttons.splice(this.selectedMenuIndex, 1)
          this.selectedMenuIndex = 0
        } else {
          this.menu.buttons.splice(this.selectedMenuIndex, 1)
          this.selectedMenuIndex -= 1
        }
        if (this.menu.buttons.length === 0) {
          this.selectedMenuIndex = ''
        }
      } else if (this.selectedMenuLevel() === 2) {
        if (this.selectedSubMenuIndex === 0) {
          this.menu.buttons[this.selectedMenuIndex].subButtons.splice(this.selectedSubMenuIndex, 1)
          this.selectedSubMenuIndex = 0
        } else {
          this.menu.buttons[this.selectedMenuIndex].subButtons.splice(this.selectedSubMenuIndex, 1)
          this.selectedSubMenuIndex -= 1
        }
        if (this.menu.buttons[this.selectedMenuIndex].subButtons.length === 0) {
          this.selectedSubMenuIndex = ''
        }
      }
    },
    // 检查菜单名称长度
    checkMenuName(val) {
      if (this.selectedMenuLevel() === 1 && this.getMenuNameLen(val) <= 8) {
        this.menuNameBounds = false
      } else this.menuNameBounds = !(this.selectedMenuLevel() === 2 && this.getMenuNameLen(val) <= 16)
    },
    // 获取菜单名称长度
    getMenuNameLen(val) {
      var len = 0
      for (var i = 0; i < val.length; i++) {
        var a = val.charAt(i)
        a.match(/[^\x00-\xff]/gi) != null ? (len += 2) : (len += 1)
      }
      return len
    },
    // 选择公众号素材库素材
    selectMaterialId() {
      this.materialDialog = true
      this.getMaterialList()
    },
    // 设置选择的素材id
    setMaterialId(row) {
      const {media_id, content} = row
      if (this.selectedMenuLevel() === 1) {
        this.$set(this.menu.buttons[this.selectedMenuIndex], 'media_id', media_id)
      } else if (this.selectedMenuLevel() === 2) {
        this.$set(this.menu.buttons[this.selectedMenuIndex].subButtons[this.selectedSubMenuIndex], 'media_id', media_id)
      }
      const {news_item} = content
      const item = news_item[0]
      this.material.title = item.title
      this.material.url = item.url
      this.materialDialog = false
    },
    // 删除选择的素材id
    delMaterialId() {
      if (this.selectedMenuLevel() === 1) {
        this.$set(this.menu.buttons[this.selectedMenuIndex], 'media_id', '')
      } else if (this.selectedMenuLevel() === 2) {
        this.$set(this.menu.buttons[this.selectedMenuIndex].subButtons[this.selectedSubMenuIndex], 'media_id', '')
      }
    },
    // 设置选择的图文链接
    setNewsUrl(row) {
      const {url} = row
      if (this.selectedMenuLevel() === 1) {
        this.$set(this.menu.buttons[this.selectedMenuIndex], 'url', url)
      } else if (this.selectedMenuLevel() === 2) {
        this.$set(this.menu.buttons[this.selectedMenuIndex].subButtons[this.selectedSubMenuIndex], 'url', url)
      }
      this.newsDialog = false
    },
    // 向下移动菜单
    setMenuDown() {
      if (this.selectedSubMenuIndex === this.menu.buttons[this.selectedMenuIndex].subButtons.length - 1) {
        return this.$message.error('他已经是最下面了，不能再下啦！')
      }
      const willUpMenu = this.menu.buttons[this.selectedMenuIndex].subButtons[this.selectedSubMenuIndex + 1]
      this.menu.buttons[this.selectedMenuIndex].subButtons[this.selectedSubMenuIndex + 1] = this.menu.buttons[this.selectedMenuIndex].subButtons[this.selectedSubMenuIndex]
      this.menu.buttons[this.selectedMenuIndex].subButtons[this.selectedSubMenuIndex] = willUpMenu
      this.selectedSubMenu(this.selectedSubMenuIndex + 1)
    },
    // 向上移动菜单
    setMenuUp() {
      if (this.selectedSubMenuIndex === 0) {
        return this.$message.error('他已经是最上面了，不能再上啦！')
      }
      const willDownMenu = this.menu.buttons[this.selectedMenuIndex].subButtons[this.selectedSubMenuIndex - 1]
      this.menu.buttons[this.selectedMenuIndex].subButtons[this.selectedSubMenuIndex - 1] = this.menu.buttons[this.selectedMenuIndex].subButtons[this.selectedSubMenuIndex]
      this.menu.buttons[this.selectedMenuIndex].subButtons[this.selectedSubMenuIndex] = willDownMenu
      this.selectedSubMenu(this.selectedSubMenuIndex - 1)
    },
    showMenu() {
      console.log(this.showMenuData)
      this.showMenuData = !this.showMenuData
      console.log(this.showMenuData)
    },
    // 获取素材信息
    async getMaterial(id) {
      this.materialLoading = true
      try {
        const url = `${getMaterialAPI}?${new URLSearchParams({
          media_id: id
        })}`
        const resp = await fetch(url)
        const res = await resp.json()
        this.material.title = res.data.news_item[0].title
        this.material.url = res.data.news_item[0].url
      } catch (err) {
        console.error(err)
      }
      this.materialLoading = false
    },
    async getNewsList() {
      // eslint-disable-next-line no-self-compare
      if (this.newsListOffset > 0 && this.newsListOffset >= this.newsListOffset) {
        return
      }
      try {
        const url = `${getNewsListAPI}?${new URLSearchParams({
          type: 'news',
          offset: this.newsListOffset,
          count: 20
        })}`
        const resp = await fetch(url)
        const res = await resp.json()
        this.newsList = this.newsList.concat(res.data.item)
        this.newsListOffset += res.data.item_count
        this.newsListTotal = res.data.total_count
      } catch (err) {
        console.error(err)
      }
    },
    async getMaterialList() {
      if (this.materialListOffset > 0 && this.materialListOffset >= this.materialListTotal) {
        return
      }
      try {
        const url = `${getMaterialListAPI}?${new URLSearchParams({
          type: 'news',
          offset: this.materialListOffset,
          count: 20
        })}`
        const resp = await fetch(url)
        const res = await resp.json()
        this.materialList = this.materialList.concat(res.data.item)
        this.materialListOffset += res.data.item_count
        this.materialListTotal = res.data.total_count
      } catch (err) {
        console.error(err)
      }
    },
    async onMenuSubmit() {
      try {
        await this.$confirm('确定后发布当前自定义菜单', '提示')
        // 提交菜单
        menuJson(JSON.stringify({
          json: JSON.stringify(this.menu)
        })).then(res => {
          console.log(res)
          this.$message.success('发布成功')
        }).catch(err => {
          this.$message.warning(err.msg || '发布失败')
        })
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>
<style scoped>
* {
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

ul {
  padding: 0;
}

li {
  list-style: none;
}

[v-cloak] {
  display: none;
}

#app-menu {
  overflow: hidden;
  width: 100%;
}

.wx-picker {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 20px;
}

.weixin-preview {
  position: relative;
  width: 320px;
  height: 600px;
  float: left;
  margin-right: 10px;
  border: 1px solid #e7e7eb;
}

.weixin-preview a {
  text-decoration: none;
  color: #616161;
}

.weixin-preview .weixin-hd {
  color: #fff;
  text-align: center;
  position: relative;
  top: 0;
  left: 0;
  width: 320px;
  height: 64px;
  background: transparent url(../../../assets/images/wxMenu/menu_head.png) no-repeat 0 0;
}

.weixin-preview .weixin-hd .weixin-title {
  color: #fff;
  font-size: 15px;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 33px;
  left: 0;
}

.weixin-preview .weixin-bd {

}

.weixin-preview .weixin-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #e7e7e7;
  background: transparent url(../../../assets/images/wxMenu/menu_foot.png) no-repeat 0 0;
  padding-left: 43px;
  margin-bottom: 0;
}

/*一级*/
.weixin-preview .weixin-menu .menu-item {
  position: relative;
  float: left;
  line-height: 50px;
  height: 50px;
  text-align: center;
  width: 33.33%;
  border-left: 1px solid #e7e7e7;
  cursor: pointer;
  color: #616161;
  font-size: 14px;
}

.weixin-preview .weixin-menu .menu-item:first-child {
  /*border-left-width:0px;*/
}

/*二级*/
.weixin-preview .weixin-sub-menu {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  border-top: 1px solid #d0d0d0;
  margin-bottom: 0;
  background: #fafafa;
  display: block;
  padding: 0;
}

.weixin-preview .weixin-sub-menu .menu-sub-item {
  line-height: 50px;
  height: 50px;
  text-align: center;
  width: 100%;
  border: 1px solid #d0d0d0;
  border-top-width: 0;
  cursor: pointer;
  position: relative;
  color: #616161;
}

.weixin-preview .menu-arrow {
  position: absolute;
  left: 50%;
  margin-left: -6px;
}

.weixin-preview .arrow_in {
  bottom: -4px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px 6px 0;
  border-style: solid dashed dashed;
  border-color: #fafafa transparent transparent;
}

.weixin-preview .arrow_out {
  bottom: -5px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px 6px 0;
  border-style: solid dashed dashed;
  border-color: #d0d0d0 transparent transparent;
}

.weixin-preview .menu-item .menu-item-title, .weixin-preview .menu-sub-item .menu-item-title {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.weixin-preview .menu-item.current, .weixin-preview .menu-sub-item.current {
  border: 1px solid #44b549;
  background: #fff;
  color: #44b549;
}

.weixin-preview .icon_menu_dot {
  background: url(../../../assets/images/wxMenu/index_z354723.png) 0 -36px no-repeat;
  width: 7px;
  height: 7px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 2px;
  margin-top: -2px;
}

.weixin-preview .icon14_menu_add {
  background: url(../../../assets/images/wxMenu/index_z354723.png) 0 0 no-repeat;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  display: inline-block;
  margin-top: -2px;
}

.weixin-preview li:hover .icon14_menu_add {
  background: url(../../../assets/images/wxMenu/index_z354723.png) 0 -18px no-repeat;
}

.weixin-preview .menu-item:hover {
  color: #000;
}

.weixin-preview .menu-sub-item:hover {
  background: #eee;
}

.weixin-preview li.current:hover {
  background: #fff;
  color: #44b549;
}

/*菜单内容*/
.weixin-menu-detail {
  width: calc(100% - 400px);
  padding: 0 20px 5px;
  background-color: #f4f5f9;
  border: 1px solid #e7e7eb;
  float: left;
  min-height: 600px;
  font-size: 13px;
}

.weixin-menu-detail .menu-name {
  float: left;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
}

.weixin-menu-detail .menu-del {
  float: right;
  height: 40px;
  line-height: 40px;
  color: #459ae9;
  cursor: pointer;
}

.weixin-menu-detail .menu-input-group {
  width: 100%;
  margin: 10px 0 30px 0;
  overflow: hidden;
}

.weixin-menu-detail .menu-label {
  float: left;
  height: 30px;
  line-height: 30px;
  width: 60px;
  text-align: right;
}

.weixin-menu-detail .menu-input {
  float: left;
  width: 98%;
}

.weixin-menu-detail .menu-input-text {
  border: 0;
  outline: 0;
  background: #fff;
  width: 100%;
  padding: 5px 0 5px 0;
  margin-left: 10px;
  text-indent: 10px;
  height: 35px;
}

.weixin-menu-detail .menu-input-textarea {
  background: #fff;
  width: 100%;
}

.weixin-menu-detail .menu-tips {
  color: #8d8d8d;
  padding-top: 4px;
  margin: 0;
}

.weixin-menu-detail .menu-input .menu-tips {
  margin: 0 0 0 10px;
}

.weixin-menu-detail .menu-content {
  padding: 16px 20px;
  border: 1px solid #e7e7eb;
  background-color: #fff;
}

.weixin-menu-detail .menu-content .menu-input-group {
  margin: 0 0 10px 0;
}

.weixin-menu-detail .menu-content .menu-label {
  text-align: left;
  width: 100px;
}

.weixin-menu-detail .menu-content .menu-input-text {
  border: 1px solid #e7e7eb;
}

.weixin-menu-detail .menu-content .menu-tips {
  padding-bottom: 10px;
}

.weixin-menu-detail .menu-msg-content {
  padding: 0;
  border: 1px solid #e7e7eb;
  background-color: #fff;
}

.weixin-menu-detail .menu-msg-content .menu-msg-head {
  overflow: hidden;
  border-bottom: 1px solid #e7e7eb;
  line-height: 38px;
  height: 38px;
  padding: 0 20px;
}

.weixin-menu-detail .menu-msg-content .menu-msg-panel {
  padding: 30px 50px;
}

.weixin-menu-detail .menu-msg-content .menu-msg-select {
  padding: 40px 20px;
  border: 2px dotted #d9dadc;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.weixin-menu-detail .menu-msg-content .menu-msg-select:hover {
  border-color: #b3b3b3;
}

.weixin-menu-detail .menu-msg-content strong {
  display: block;
  padding-top: 3px;
  font-weight: 400;
  font-style: normal;
}

.weixin-menu-detail .menu-msg-content .menu-msg-title {
  float: left;
  width: 310px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon36_common {
  width: 36px;
  height: 36px;
  vertical-align: middle;
  display: inline-block;
}

.icon36_common.add_gray {
  background: url(../../../assets/images/wxMenu/base_z381ecd.png) 0 -2548px no-repeat;
}

.icon_msg_sender {
  margin-right: 3px;
  margin-top: -2px;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
  background: url(../../../assets/images/wxMenu/msg_tab_z25df2d.png) 0 -270px no-repeat;
}

.weixin-btn-group {
  text-align: center;
  width: 950px;
  margin: 30px 0;
  overflow: hidden;
}

#material-list table {
  width: 100%;
}
</style>
